<template>
  <div class="echarts">
    <van-nav-bar
      title="实况统计"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickright"
    >
      <van-icon slot="right" name="location-o" />
      <div slot="right" class="rightname">
        {{ cityName }}/{{ areaName }}
      </div>
    </van-nav-bar>
    
    <div class="main">
      <div class="top">
        <div>
          <img
            v-if="clear0 == 0"
            src="../../assets/setLiveData/天气图标_slices/qing.png"
            alt=""
          />
          <img
            v-if="clear0 == 2"
            src="../../assets/setLiveData/天气图标_slices/zy.png"
            alt=""
          />
          <img
            v-if="clear0 == 3"
            src="../../assets/setLiveData/天气图标_slices/lzy.png"
            alt=""
          />
          <img
            v-if="clear0 == 4"
            src="../../assets/setLiveData/天气图标_slices/xue.png"
            alt=""
          />
          <img
            v-if="clear0 == 6"
            src="../../assets/setLiveData/天气图标_slices/wu.png"
            alt=""
          />
          <img
            v-if="clear0 == 9"
            src="../../assets/setLiveData/天气图标_slices/yin .png"
            alt=""
          />
          <img
            v-if="clear0 == 1"
            src="../../assets/setLiveData/天气图标_slices/duoyun.png"
            alt=""
          />
        </div>
        <div>{{ temperature }}℃</div>
      </div>
      <div class="center">
        <div>
          <div class="centerSun">
            <span
              ><img src="../../assets/newhome/tianqiicon/shidu.png" alt=""
            /></span>
            <span class="wenzitop">{{ weatherInfo.skzdzsRhu }}</span>
            <span class="wenzi">湿度</span>
          </div>
          <div class="centerSun">
            <span
              ><img
                src="../../assets/newhome/tianqiicon/jiangshiliang.png"
                alt=""
            /></span>
            <span class="wenzitop">{{ weatherInfo.skzdzsPre24 }}</span>
            <span class="wenzi">24小时降水</span>
          </div>
          <div class="centerSun">
            <span
              ><img src="../../assets/newhome/tianqiicon/fengsu.png" alt=""
            /></span>
            <span class="wenzitop">{{ weatherInfo.skzdzsWindinstmax }}</span>
            <span class="wenzi">风速</span>
          </div>
        </div>
      </div>
      <div class="topTabbarArea">
        <van-tabs v-model="topActive" @click="onClick" class="vanSelfTabs">
          <van-tab>
            <template #title>
              <img
                v-if="topActive != 0"
                src="../../assets/yubaoIcon/wendu.png"
              />
              <img
                v-if="topActive == 0"
                src="../../assets/yubaoIcon/wenduActive.png"
              />
              <span>温度</span>
            </template>
          </van-tab>
          <van-tab>
            <template #title>
              <img v-if="topActive != 1" src="../../assets/yu.png" />
              <img v-if="topActive == 1" src="../../assets/yuActive.png" />
              <span>降水</span>
            </template>
          </van-tab>
          <van-tab>
            <template #title>
              <img v-if="topActive != 2" src="../../assets/feng.png" />
              <img v-if="topActive == 2" src="../../assets/fengActive.png" />
              <span>风力</span>
            </template>
          </van-tab>
          <van-tab>
            <template #title>
              <img v-if="topActive != 3" src="../../assets/shi.png" />
              <img v-if="topActive == 3" src="../../assets/shiActive.png" />
              <span>湿度</span>
            </template>
          </van-tab>
        </van-tabs>
      </div>

      <!--走势图-->
      <div class="echartsTu">
        <div v-if="active == 0" class="echartsLive">
          <div class="echartsName">
            <span>{{ echartsLiveName }}</span>
          </div>
          <span style=" display: inline-block; margin-top: 15px;"
            >实况时段：</span
          ><span>{{ formatWordTime.beforeTime }}</span
          ><span> - </span><span>{{ formatWordTime.nowTime }}</span>
        </div>
        <div class="echartsSelfStyle">
          <echarts
            v-if="active == 0 && showEcharts"
            :option="ldTrendChartOpt"
            id="ldTrendChart"
          >
          </echarts>
        </div>
      </div>
      <comArea
        v-if="showArea"
        @closeEmit="closeAreaMet"
        @confirmEmit="confirmEmitMet"
        :cityName1="cityName"
        :arr="arr"
      >
      </comArea>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import meteoroHomeApi from '@/service/home.js'

import ldTrendChartOpt from '@/components/mixins/ldTrendChartOpt.js'
import jiantoulv from '@/assets/jiantoulv.png'
import jiantoulan from '@/assets/jiantoulan.png'
import comArea from '../../components/common/area.vue'

export default {
  mixins: [ldTrendChartOpt],
  //import引入的组件需要注入到对象中才能使用
  components: { comArea },
  data() {
    //这里存放数据
    return {
      active: 0,
      topActive: 0,
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      weatherInfo: {
        skzdzsRhu: '0',
        skzdzsPre24: '0',
        skzdzsWindinstmax: '0',
      },
      clear0: 0,
      formatWordTime: {},
      showEcharts: false,
      echartsLiveName: '温度曲线',
      city: '',
      cnty: '',
      temperature: '23',
      arr: [],
      location: [],
    }
  },
  props: {
    cityName: {
      type: String,
      default: String,
    },
    showArea: {
      type: Boolean,
      default: true,
    },
    areaName: {
      type: String,
      default: String,
    },
    lng: {
      type: Number,
      default: Number,
    },
    lat: {
      type: Number,
      default: Number,
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // topActive: {
    //   immediate: true,
    //   handler(val, old) {
    //     this.topActiveChange(this.cityName, this.areaName)
    //   },
    //   deep: true,
    // },
  },
  //方法集合
  methods: {
    onClickLeft() {
      this.$emit('onClickLeftclose')
    },
    onClick(name, title) {
      this.topActive = name
      this.topActiveChange(this.cityName, this.areaName)
    },
    closeAreaMet() {
      //   this.showArea = false
      this.$emit('showAreas', false)
    },
    geocodingTask(value) {
      var _this = this
    },
    onClickright() {
      //   this.showArea = true
      this.$emit('showAreas', true)
      this.arr = [this.cityName, this.areaName]
    },
    confirmEmitMet(value) {
      this.$emit('cityNames', value[1].name)
      this.$emit('areaNames', value[2].name)
      //   this.cityName = value[1].name
      //   this.areaName = value[2].name

      this.arr = [this.cityName, this.areaName]
      var _this = this
      //   _this.showArea = false
      this.$emit('showAreas', false)
      var geocodingTask = null
      SGMap.plugin('SGMap.GeocodingTask').then(function(res) {
        geocodingTask = new SGMap.GeocodingTask()

        geocodingTask
          .getLocation({
            address: `${value[1].name + value[2].name}`,
            region: '山西',
            isEncode: false,
          })
          .then(function(result) {
            _this.$emit('lngs', result.location[0])
            _this.$emit('lats', result.location[1])
            _this.topActiveChange(_this.cityName, _this.areaName)
            _this.getInit()
          })
      })
    },
    topActiveChange(cityName, areaName) {
      this.showEcharts = false
      if (this.topActive == 0) {
        // this.$toast.loading({
        //   message: '加载中...',
        //   forbidClick: true,
        //   duration: 0,
        // })
        this.echartsLiveName = '温度曲线'
        //this.ldTrendChartOpt.yAxis.name = "摄氏度()";

        var city = cityName
        var cnty = areaName
        if (cnty == undefined) {
          cnty = ''
        }
        // if (areaName.length > 2) {
        //   city = city
        //     .replace('区', '')
        //     .replace('县', '')
        //     .replace('市', '')
        // }
        // if (cnty.length > 2) {
        //   cnty = cnty
        //     .replace('区', '')
        //     .replace('县', '')
        //     .replace('市', '')
        // }

        var params = {
          skzdzsCity: city,
          skzdzsCnty: cnty,
          skzdzsLat: this.lat,
          skzdzsLon: this.lng,
        }

        meteoroHomeApi
          .lineTemp(params)
          .then((res) => {
            this.ldTrendChartOpt.series[0].symbolSize = 8
            this.ldTrendChartOpt.series[1].symbolSize = 8

            this.showEcharts = false
            this.ldTrendChartOpt.xAxis.data = this.$util.getNowBeforeHour()

            var a = this.$util.getNowBeforeHour().reverse()

            this.ldTrendChartOpt.xAxis.data = a
            this.ldTrendChartOpt.series[0].data = []

            var updatedArray = res.temp.map(function(element) {
              if (element.toString().length > 5) {
                return (element = null)
              } else {
                return element
              }
            })

            var length = updatedArray.length

            for (var i = 0; i < length; i++) {
              if (updatedArray[i] === null) {
                var prev = updatedArray[i - 1] || 0 // 获取前一个元素的值，如果不存在，则默认为 0
                var next = updatedArray[i + 1] || 0 // 获取后一个元素的值，如果不存在，则默认为 0

                updatedArray[i] = parseInt((prev + next) / 2) // 将前一个值加上后一个值赋给当前元素
              }
            }

            this.ldTrendChartOpt.series[1].data = updatedArray
            this.ldTrendChartOpt.series[2].data = []

            this.$nextTick(() => {
              this.showEcharts = true
            })
            this.$toast.clear()
          })
          .catch((error) => {
            console.log('error', error)
            this.$toast.clear()
          })

        this.ldTrendChartOpt.yAxis.axisLabel.formatter = '{value} °C'
        // this.ldTrendChartOpt.series[0].type = 'line'
        this.ldTrendChartOpt.series[1].type = 'line'
        // this.ldTrendChartOpt.series[2].type = 'line'
        this.ldTrendChartOpt.series[1].name = '温度'
        // this.ldTrendChartOpt.series[1].name = '平均温度'
        // this.ldTrendChartOpt.series[2].name = '最低温度'

        // this.ldTrendChartOpt.series[0].symbol = 'emptyCircle'
        this.ldTrendChartOpt.series[1].symbol = 'emptyCircle'
        this.ldTrendChartOpt.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function(val) {
            var txt = val[0].name
            return (
              val[0].name +
              '<br>' +
              val[0].marker +
              val[0].seriesName +
              val[0].value +
              '℃<br>'
            )
          },
        }
      } else if (this.topActive == 1) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        })

        this.showEcharts = false
        var city = this.cityName
        var cnty = this.areaName

        if (cnty == undefined) {
          cnty = ''
        }
        var params = {
          skzdzsCity: city,
          skzdzsCnty: cnty,
          skzdzsLat: this.lat,
          skzdzsLon: this.lng,
        }
        meteoroHomeApi
          .lineRain(params)
          .then((res) => {
            // this.ldTrendChartOpt.series[0].symbolSize = 8
            this.ldTrendChartOpt.series[1].symbolSize = 8
            this.showEcharts = false
            this.ldTrendChartOpt.series[0].data = []
            this.ldTrendChartOpt.series[2].data = []
            var updatedArray = res.rain24.map(function(element) {
              if (element.toString().length > 5) {
                return (element = null)
              } else {
                return element
              }
            })
            var length = updatedArray.length

            for (var i = 0; i < length; i++) {
              if (updatedArray[i] === null) {
                var prev = updatedArray[i - 1] || 0 // 获取前一个元素的值，如果不存在，则默认为 0
                var next = updatedArray[i + 1] || 0 // 获取后一个元素的值，如果不存在，则默认为 0

                updatedArray[i] = parseInt((prev + next) / 2) // 将前一个值加上后一个值赋给当前元素
              }
            }

            this.ldTrendChartOpt.series[1].data = updatedArray

            this.$nextTick(() => {
              this.showEcharts = true
            })
            this.$toast.clear()
          })
          .catch((error) => {
            console.log('error', error)
            this.$toast.clear()
          })

        this.echartsLiveName = '降水曲线'
        //this.ldTrendChartOpt.yAxis.name = "雨量";
        this.ldTrendChartOpt.yAxis.axisLabel.formatter = '{value} mm'
        // this.ldTrendChartOpt.series[0].type = 'bar'
        this.ldTrendChartOpt.series[1].type = 'bar'
        this.ldTrendChartOpt.series[2].data = []

        this.ldTrendChartOpt.series[0].data = []
        this.ldTrendChartOpt.series[1].data = []
        // this.ldTrendChartOpt.series[0].name = '小时降水'
        this.ldTrendChartOpt.series[1].name = '24小时降水'
        this.ldTrendChartOpt.xAxis.data = this.$util.getNowBeforeHour()

        var a = this.$util.getNowBeforeHour().reverse()

        this.ldTrendChartOpt.xAxis.data = a
        // this.ldTrendChartOpt.series[0].symbol = 'emptyCircle'
        this.ldTrendChartOpt.series[1].symbol = 'emptyCircle'
        this.ldTrendChartOpt.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function(val) {
            var txt = val[0].name
            return (
              val[0].name +
              '<br>' +
              val[0].marker +
              '24小时降水&ensp;&ensp;' +
              val[0].value +
              'mm<br>'
            )
          },
        }
      } else if (this.topActive == 2) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        })
        this.showEcharts = false
        var city = this.cityName
        var cnty = this.areaName
        if (cnty == undefined) {
          cnty = ''
        }

        var params = {
          skzdzsCity: city,
          skzdzsCnty: cnty,
          skzdzsLat: this.lat,
          skzdzsLon: this.lng,
        }

        meteoroHomeApi
          .lineWin(params)
          .then((res) => {
            this.showEcharts = false
            var updatedArray = res.instmax.map(function(element) {
              if (element.toString().length > 5) {
                return (element = null)
              } else {
                return element
              }
            })
            var updatedArray1 = res.avg10mi.map(function(element) {
              if (element.toString().length > 5) {
                return (element = null)
              } else {
                return element
              }
            })
            var length = updatedArray.length
            var length = updatedArray1.length
            for (var i = 0; i < length; i++) {
              if (updatedArray[i] === null) {
                var prev = updatedArray[i - 1] || 0 // 获取前一个元素的值，如果不存在，则默认为 0
                var next = updatedArray[i + 1] || 0 // 获取后一个元素的值，如果不存在，则默认为 0

                updatedArray[i] = parseInt((prev + next) / 2) // 将前一个值加上后一个值赋给当前元素
              }
            }
            for (var i = 0; i < length; i++) {
              if (updatedArray1[i] === null) {
                var prev = updatedArray1[i - 1] || 0 // 获取前一个元素的值，如果不存在，则默认为 0
                var next = updatedArray1[i + 1] || 0 // 获取后一个元素的值，如果不存在，则默认为 0

                updatedArray1[i] = parseInt((prev + next) / 2) // 将前一个值加上后一个值赋给当前元素
              }
            }

            this.ldTrendChartOpt.series[0].data = updatedArray
            this.ldTrendChartOpt.series[1].data = updatedArray1

            this.ldTrendChartOpt.series[0].symbol = 'image://' + jiantoulan
            //this.ldTrendChartOpt.series[0].symbol = 'arrow'
            this.ldTrendChartOpt.series[1].symbol = 'image://' + jiantoulv
            var arr = []
            var arr1 = []
            this.ldTrendChartOpt.series[0].symbolSize = 20
            this.ldTrendChartOpt.series[1].symbolSize = 20
            this.ldTrendChartOpt.series[0].data.forEach((item, index) => {
              var obj = {
                value: item,
                symbolRotate: res.dInstmax[index],
              }
              arr.push(obj)
            })
            this.ldTrendChartOpt.series[1].data.forEach((item, index) => {
              var obj = {
                value: item,
                symbolRotate: res.dAvg10mi[index],
              }
              arr1.push(obj)
            })
            this.ldTrendChartOpt.series[0].data = arr
            this.ldTrendChartOpt.series[1].data = arr1

            this.$nextTick(() => {
              this.showEcharts = true
            })
            this.$toast.clear()
          })
          .catch((error) => {
            console.log('error', error)
            this.$toast.clear()
          })

        this.echartsLiveName = '风力曲线'

        //this.ldTrendChartOpt.yAxis.name = "极大风速";
        this.ldTrendChartOpt.yAxis.axisLabel.formatter = '{value} m/s'
        this.ldTrendChartOpt.series[0].type = 'line'
        this.ldTrendChartOpt.series[1].type = 'line'
        this.ldTrendChartOpt.xAxis.data = this.$util.getNowBeforeHour()

        var a = this.$util.getNowBeforeHour().reverse()

        this.ldTrendChartOpt.xAxis.data = a
        this.ldTrendChartOpt.series[2].data = []
        this.ldTrendChartOpt.series[1].name = '平均风力'
        this.ldTrendChartOpt.series[0].name = '极大风力'

        //this.ldTrendChartOpt.series[0].symbol = forecast
        //this.ldTrendChartOpt.series[1].symbol = forecast
        this.ldTrendChartOpt.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function(val) {
            var txt = val[0].name
            return (
              val[0].name +
              '<br>' +
              val[0].marker +
              '极大风力' +
              val[0].value +
              'm/s<br>' +
              val[1].marker +
              '平均风力' +
              val[1].value +
              'm/s'
            )
          },
        }
      } else if (this.topActive == 3) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        })

        this.showEcharts = false
        var city = this.cityName
        var cnty = this.areaName
        if (cnty == undefined) {
          cnty = ''
        }
        // if (this.areaName.length > 2) {
        //   city = city
        //     .replace('区', '')
        //     .replace('县', '')
        //     .replace('市', '')
        // }
        // if (cnty.length > 2) {
        //   cnty = cnty
        //     .replace('区', '')
        //     .replace('县', '')
        //     .replace('市', '')
        // }

        var params = {
          skzdzsCity: city,
          skzdzsCnty: cnty,
          skzdzsLat: this.lat,
          skzdzsLon: this.lng,
        }
        meteoroHomeApi
          .lineHum(params)
          .then((res) => {
            this.showEcharts = false
            this.ldTrendChartOpt.series[0].symbolSize = 8
            this.ldTrendChartOpt.series[1].symbolSize = 8
            // this.ldTrendChartOpt.series[0].data = [
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            // ]
            var updatedArray = res.xdRhu.map(function(element) {
              if (element.toString().length > 5) {
                return (element = null)
              } else {
                return element
              }
            })
            var length = updatedArray.length

            for (var i = 0; i < length; i++) {
              if (updatedArray[i] === null) {
                var prev = updatedArray[i - 1] || 0 // 获取前一个元素的值，如果不存在，则默认为 0
                var next = updatedArray[i + 1] || 0 // 获取后一个元素的值，如果不存在，则默认为 0

                updatedArray[i] = parseInt((prev + next) / 2) // 将前一个值加上后一个值赋给当前元素
              }
            }
            this.ldTrendChartOpt.series[1].data = updatedArray

            this.$nextTick(() => {
              this.showEcharts = true
            })
            this.$toast.clear()
          })
          .catch((error) => {
            console.log('error', error)
            this.$toast.clear()
          })
        this.echartsLiveName = '湿度曲线'
        //this.ldTrendChartOpt.yAxis.name = "湿度";
        this.ldTrendChartOpt.yAxis.axisLabel.formatter = '{value} %rh'
        this.ldTrendChartOpt.series[0].type = 'line'
        this.ldTrendChartOpt.series[1].type = 'line'
        this.ldTrendChartOpt.series[2].type = 'line'
        this.ldTrendChartOpt.series[0].name = '最高湿度'
        this.ldTrendChartOpt.series[1].name = '平均湿度'
        this.ldTrendChartOpt.series[2].name = '最低湿度'
        this.ldTrendChartOpt.xAxis.data = this.$util.getNowBeforeHour()

        var a = this.$util.getNowBeforeHour().reverse()
        this.ldTrendChartOpt.series[2].data = []
        this.ldTrendChartOpt.series[0].data = []
        this.ldTrendChartOpt.series[1].data = []
        this.ldTrendChartOpt.xAxis.data = a
        this.ldTrendChartOpt.series[0].symbol = 'emptyCircle'
        this.ldTrendChartOpt.series[1].symbol = 'emptyCircle'
        this.ldTrendChartOpt.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function(val) {
            var txt = val[0].name
            // return val[0].name + "<br>" + val[0].marker + '相对湿度' + val[0].value + " %<br>" +
            // 	val[1].marker + '实时风力' + val[1].value + " %<br>" +
            // 	val[2].marker + '实时风力' + val[2].value + " %";
            return (
              val[0].name +
              '<br>' +
              val[0].marker +
              '相对湿度' +
              val[0].value +
              ' %'
            )
          },
        }
      }
    },
    getInit() {
      if (this.areaName == undefined) {
        this.areaName = ''
      }
      let params24 = {
        skzdzsCity: this.cityName,
        skzdzsCnty: this.areaName,
        skzdzsProvince: '山西省',
        skzdzsLat: this.lat,
        skzdzsLon: this.lng,
      }

      meteoroHomeApi
        .get24Horse(params24)
        .then((res) => {
          this.temperature = res.skzdzsTem

          // this.temperature = res.index.temperature //温度
          // this.dateOfWeek = res.index.dayOfWeek //星期
          // this.phrase = res.index.phrase //简略描述
          // this.narrative = res.narrative //+res.month[0].day.windSpeed_convert

          if (res.desc == 'qing') {
            this.clear0 = 0
          }
          if (res.desc == 'yun') {
            this.clear0 = 1
          }
          if (res.desc == 'yu') {
            this.clear0 = 2
          }

          if (res.desc == 'leiyu') {
            this.clear0 = 3
          }
          if (res.desc == 'xue') {
            this.clear0 = 4
          }
          if (res.desc == 'yujiaxue') {
            this.clear0 = 5
          }
          if (res.desc == 'wu') {
            this.clear0 = 6
          }
          if (res.desc == 'wumai') {
            this.clear0 = 8
          }
          if (res.desc == 'shachenbao') {
            this.clear0 = 7
          }
          if (res.desc == 'yin') {
            this.clear0 = 9
          }
          for (var key in res) {
            if (typeof res[key] === 'number') {
              res[key] = res[key].toString()
            }
          }
          if (res.skzdzsWinsavg10mi.includes('999')) {
            res.skzdzsWinsavg10mi = '--'
          }
          if (res.skzdzsRhu.includes('999')) {
            res.skzdzsRhu = '--'
          }
          if (res.skzdzsPre24.includes('999')) {
            res.skzdzsPre24 = '--'
          }
          //   this.homeChartOpt.series[0].data = res.pre
          //温度
          this.weatherInfo = {
            skzdzsWindinstmax: res.skzdzsWinsavg10mi, //风速
            skzdzsRhu: res.skzdzsRhu, //相对湿度
            skzdzsPre24: res.skzdzsPre24, //降水量
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.formatWordTime = this.$util.formatWordTime()
    //echarts图表x轴
    this.ldTrendChartOpt.xAxis.data = this.$util.getNowBeforeHour()
    this.ldTrendChartOpt.xAxis.data = this.$util.getNowBeforeHour().reverse()
    this.getInit()
    this.topActiveChange(this.cityName, this.areaName)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style type="text/css" lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
  background: #357cff;
  overflow-y: auto;
  overflow-x: hidden;
  .main {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      182deg,
      #d5e3ff 0%,
      #f5f8fe 26%,
      #fafbff 42%,
      #ffffff 100%
    );
    border-radius: 20px 20px 0px 0px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .top {
      position: relative;

      display: inline-block;

      :before {
        content: '';
        /* 不允许左侧和右侧有浮动效果 */
        clear: both;
        /* clear:both 只会对块元素生效。 */
        display: block;
      }

      width: 100%;
      justify-content: space-between;
      :nth-child(1) {
        position: absolute;
        top: -30px;
        width: 145px;
        height: 140px;
      }
      :nth-child(2) {
        position: absolute;
        right: 15px;
        font-size: 55px;
        top: -10px;
        font-family: DIN-Bold, DIN;
        font-weight: 550;
        color: #101010;
      }
    }
    .center {
      display: block;
      margin-top: 70px;

      :nth-child(1) {
        display: flex;
        justify-content: space-evenly;
        // margin-bottom: 15px;
      }
      :nth-child(2) {
        display: flex;
        justify-content: space-evenly;
      }
      .centerSun {
        display: flex;
        flex-direction: column;
        width: 100px;
        height: 100px;
        background: #ffffff;
        border-radius: 10px;
        justify-content: space-evenly;
        align-items: center;
        .wenzi {
          font-size: 12px;

          font-weight: 400;
          color: #bcbcbc;
        }
        .wenzitop {
          font-size: 17px;

          font-weight: 500;
          color: #101010;
        }
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
    .echartsTu {
      width: 345px;
      margin: 0 auto;
      padding-bottom: 5px;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
      border-radius: 20px;
    }
    .topTabbarArea {
      height: 45px;
      //   background: #ffffff;
      //   box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
      .vanSelfTabs img {
        width: 20px;
        margin-right: 3px;
        vertical-align: middle;
      }

      .van-tab--active {
        color: #1989fa;
      }

      .van-tabbar--fixed {
        position: relative;
        left: 0;
        top: 0;
      }

      .van-tabbar,
      .van-tabbar-item--active {
        border-radius: 10px;
      }
    }
    .echartsLive {
      margin-top: 20px;
      padding: 0 20px;
      font-size: 14px;
      color: #646566;

      .echartsName {
        color: #333;
        font-weight: bold;
        margin-top: 10px;
      }
    }
    .echartsSelfStyle {
      height: 270px;
    }
  }
}
/*@import url(); 引入公共css类*/
</style>
